<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="UTF-8">
    <title>用户注册 - 模拟登录系统</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f2f5; margin: 0; }
        .container { background-color: #ffffff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 350px; }
        h2 { text-align: center; margin-bottom: 25px; color: #333333; font-size: 24px; }
        label { display: block; margin-bottom: 8px; color: #555555; font-weight: bold; }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 12px;
            margin-bottom: 18px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-sizing: border-box; /* 确保padding和border不增加元素总宽度 */
            font-size: 16px;
        }
        input[type="text"]:focus, input[type="password"]:focus {
            border-color: #007bff;
            outline: none; /* 移除默认的蓝色outline */
            box-shadow: 0 0 0 2px rgba(0,123,255,.25); /* 添加一个自定义的glow效果 */
        }
        input[type="submit"] {
            width: 100%;
            padding: 12px;
            background-color: #28a745; /* 绿色 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: background-color 0.2s ease-in-out;
        }
        input[type="submit"]:hover {
            background-color: #218838; /* 深一点的绿色 */
        }
        .message {
            text-align: center;
            margin-bottom: 18px;
            padding: 12px;
            border-radius: 5px;
            font-size: 15px;
        }
        .error-message {
            color: #721c24; /* 深红色文字 */
            background-color: #f8d7da; /* 淡粉色背景 */
            border: 1px solid #f5c6cb; /* 粉色边框 */
        }
        /* 我们在这个页面主要显示错误，成功消息会重定向到登录页显示 */
        /* 但如果将来需要，可以添加 .success-message 样式 */

        .navigation-link { text-align: center; margin-top: 20px; font-size: 15px; }
        .navigation-link a { color: #007bff; text-decoration: none; }
        .navigation-link a:hover { text-decoration: underline; }
    </style>
</head>
<body>
<div class="container">
    <h2>创建您的新账户</h2>

    <div th:if="${error}" class="message error-message" th:text="${error}">
        错误信息将显示在这里
    </div>

    <form th:action="@{/register}" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="请输入您的用户名" required autofocus />
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入您的密码" required />
        </div>
        <div>
            <label for="confirmPassword">确认密码:</label>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入您的密码" required />
        </div>
        <div>
            <input type="submit" value="立即注册" />
        </div>
    </form>

    <div class="navigation-link">
        已经拥有账户了? <a th:href="@{/login}">点此登录</a>
    </div>
</div>
</body>
</html>